<template>
  <!-- 侧边导航菜单部分 -->
  <div class="c_left">
    <el-menu
      @select="handleSelect"
      default-active="3-3"
      mode="vertical"
      background-color="#1a2e44"
      text-color="#8d97a2"
      active-text-color="#fff"
      style="padding: 30px; padding-left: 10px; font-size: 30px"
    >
      <el-menu-item index="1">
        <span slot="title">数据检测</span>
      </el-menu-item>
      <el-menu-item index="2">
        <span slot="title">数据分类编目</span>
      </el-menu-item>
      <el-submenu index="3">
        <template slot="title">
          <span>数据标准化</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">数据核验配置</el-menu-item>
          <el-menu-item index="3-2">数据标准化</el-menu-item>
          <el-menu-item index="3-3">模型管理</el-menu-item>
          <el-menu-item index="3-4">数据查询检索</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <span>数据清洗转换</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1">资源注册</el-menu-item>
          <el-menu-item index="4-2">映射管理</el-menu-item>
          <el-menu-item index="4-3">工作流管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$emit("fnuc", key);
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-menu-item.is-active {
  background-color: #409eff !important;
  border-radius: 10px;
  font-size: 20px;
}
::v-deep .el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #409eff !important;
  border-radius: 10px;
  color: #fff !important;
}
::v-deep .el-menu-item {
  font-size: 20px;
}
::v-deep .el-submenu__icon-arrow {
  display: none;
}
::v-deep .el-submenu__title {
  font-size: 20px;
}

.c_left {
  width: 100%;
  height: 1000px;
  background: #1a2e44;
}
</style>